import singleManager from "../../utils/getSingle";

const _opt = {
    title: "温馨提示",
    msg: "请确认您的操作！",
    confirmText: "确认",
    confirmFn() {
        console.log("点击了确定按钮");
    },
    cancelText: "取消",
    cancelFn() {
        console.log("点击了取消按钮");
    },
    abortText: "放弃修改",
    abortFn() {
        console.log ("放弃这次操作");
    },
};
function MGDialog(opt) {
    if (opt) {
        //如果用户传入进来了配置项，则使用用户的配置项
        this.opt = Object.assign({}, _opt, opt);
    } else {
        this.opt = _opt;
    }
    this.singleDialoger = singleManager(this.initDom);
    // console.log(this.initDom);
    // this.initDom();
}

//初始化弹框所需的dom
MGDialog.prototype.initDom = function () {
    console.log("只初始化一次dialog");
    let dom = `
        <div class="mg-dialog" 
            style="
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                background:rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 20;
            "
        >
            <div class="edit-dialog-box"
                style="
                    background: #fff;
                    width: 260px;
                "
            >
                <p class="edit-dialog-title"
                    style="
                    color: #fff;
                    background: #3876af;
                    position: relative;
                    text-align: left;
                    padding: 0 20px;
                    height: 32px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    "
                >
                    <span class="title-text" style="display: inline;">${this.opt.title}</span>
                    <span class="icon-close"
                        style="
                            display: block;
                            background: url('/static/image/icon.png') no-repeat;
                            background-position: 4px -37px;
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                        "
                    >
                    </span>
                </p>
                <div class="edit-dialog-content"
                    style="
                        min-height: 66px;
                        padding: 10px 20px;
                        text-align: left;
                        font-size: 14px;
                        font-family: "微软雅黑";
                    "
                >
                    ${this.opt.msg}
                </div>
                <div class="edit-dialog-button"
                    style="
                        display: flex;
                        border-top: 1px solid #eee;
                        background: #f9f9f9;
                        height: 46px;
                        align-items: center;
                        justify-content: center;
                    "
                >
                    <span class="sdrag-blue-btn confirm-btn" style="margin-right: 10px;">${this.opt.confirmText}</span>
                    <span class="sdrag-gray-btn cancel-btn" style="margin-right: 10px;">${this.opt.cancelText}</span>
                    <span class="sdrag-gray-btn abort-btn">${this.opt.abortText}</span>
                </div>
            </div>
        </div>
    `;
    let div = document.createElement("div");
    div.insertAdjacentHTML("afterbegin", dom);
    this.initEvent(div);
    div.style.display = "none";
    document.body.insertAdjacentElement("beforeend", div);
    return div;
}

//显示框框
MGDialog.prototype.showDialog = function () {
    this.singleDialoger().style.display = "block";
}
//初始化点击按钮的点击事件
MGDialog.prototype.initEvent = function (dom) {
    let editBox = dom;
    editBox.querySelector(".icon-close").onclick = this.hideDialog.bind(this);
    editBox.querySelector(".confirm-btn").onclick = this.opt.confirmFn;
    editBox.querySelector(".cancel-btn").onclick = this.opt.cancelFn;
    editBox.querySelector(".abort-btn").onclick = this.opt.abortFn;
}
//隐藏框框
MGDialog.prototype.hideDialog = function () {
    this.singleDialoger().style.display = "none";

}

export default MGDialog;

